@import url("normalize.css");
@import url("responsive-grid-layout_box-sizing_border-box_method.css");
@import url(http://fonts.googleapis.com/css?family=Roboto:400,500,900);
/*@import url("nav-main-style.css");*/
* {
      /* Used so padding and margins fit in elements defined size */
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      padding: 0; margin: 0;
 }
 
body { font-family:Roboto, Arial, Helvetica, sans-serif; ;font-size: 62.5%;
      font-size:1.6em;
	
      overflow: scroll;
      }
body {link: #000000; vlink: #000000; alink: #000000;}


		
*	body {}
	  /* Use scalable background image */
     .bg-home{background-image: url(
	 "../images/bgrounds/bg-home.jpg");}
	 .bg-printing01{background-image: url("../images/bgrounds/bg-printing01.jpg");}
	 .bg-printing{background-image: url("../images/bgrounds/bg-printing.jpg");}
	 .bg-contact{background-image: url("../images/bgrounds/bg-contact.jpg");}
	 .bg-photopaper{background-image: url("../images/bgrounds/bg-photopaper.jpg");}
	 .bg-poster{background-image: url(
	 "../images/bgrounds/bg-poster.jpg");}
	 .bg-canvas{background-image: url(
	 "../images/bgrounds/bg-canvas.jpg");}
	 .bg-laminating{background-image: url("../images/bgrounds/bg-laminating.jpg");}
	 .bg-art-paper{background-image: url("../images/bgrounds/bg-art-paper.jpg");}	 
	 .bg-moulding{background-image: url("../images/bgrounds/bg-moulding.jpg");}
	 .bg-framing-factory{background-image: url("../images/bgrounds/bg-framing-factory.jpg");}	
	 .bg-framing-factory2{background-image: url("../images/bgrounds/bg-framing-factory2.jpg");}	
	 .bg-20150908-9658{background-image: url("../images/bgrounds/bg-20150908-9658.jpg");}
     .bg-framekit{background-image: url("../images/bgrounds/bg-framekit.jpg");}	
		
	
	body { background-position: center center;
      background-attachment: fixed;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
  }

	

*{html, body, div, header, footer, aside, nav, article, section:  margin: 0 padding: 0; 
        header, footer, aside, nav, article, wrapper, section: display: block; 
  }
       
 a{text-decoration: none;}
 
 a:hover {background-color:rgb(228, 229, 245);}
 a:hover {color:rgb(128, 42, 42); }
     
    
H1 { font-family:Roboto, Verdana; font-size: 1.3em; color:#f0f0f0; padding:.3em;
     background: #3a5a95; text-align:center;letter-spacing:0.04em; margin-bottom: 10px; display:block;
     border-radius: 10px; border-color:black 1px;}
H2 { font-family:Roboto, Verdana; font-size:1.4em; font-weight:500; color: #942415f8;text-decoration:none;}
H3 { font-family:Roboto, Verdana; font-size:.8em; font-weight:400; color: #742015f8;text-decoration:none;}
H4 { font-family:Roboto, Verdana; font-size:1.4m; font-weight:500; color: #3a5a95; text-decoration:none;}
H5 { font-family:Roboto, Verdana; font-size:.8em; font-weight:100; color: #1e313a; text-decoration:none;}
H6 { font-family:Roboto, Verdana; font-size:.7em; font-weight:100; color: #1e313a}
H7 { font-family:Roboto, Verdana; font-size:.8em; font-weight:100; color: #6e1919;text-decoration:none;}
H8 { font-family:Roboto, Verdana; font-size:.8em; font-weight:100; color: #a82514f8;text-decoration:none;}
H9 { font-family:Roboto, Verdana; font-size: 0.7em; font-weight:500; color: #6e1919}

/* Fix Headers and Section Anchors*/
.anchor a {
  position: absolute;
  left: 0px;
  top: -130px;
}
.anchor {
  position: relative;
}


  /* center image test*/
  img.center-image{
	  display: block;
      margin auto;
     }

#nav5 ul {
       list-style-type:none;
       display:block;
       padding-left:3px;
       /*margin:0 auto;*/
    
       /*position:fixed holds nav in same position on page*/
       position:fixed; 
       top:100px;
       z-index:700;
    }
#nav5 .parent-menu > li{
       width:170px; height:38px;
       float:left;
       margin:-.65em 0px 0px 5px;
       position: relative;
       z-index:500;        
    }
 #nav5 a:hover { background-color:#21465F;
    }    
     
 #nav5 a{
       display:block; 
       width:170px; height:36px;
       text-align:center;
       text-decoration:none;
       border-right:1px solid black;    
       border-bottom:1px solid black;
       border-radius: 6px;
       line-height:29px;
       background-color:#17314B;
       color:#EEE;
       font-size:.7em;
     
    }
          
#nav5 .sub-menu {
        opacity: 0.9;
        filter: alpha(opacity=40); /* For IE8 and earlier */
        position:relative; left:0px; top:-43px;
        z-index:-1;
      
      
 }     
 #nav5 .sub-menu > li{
        width:180px; height:35px;
        position:absolute; left:0px; top:0px;
        
       
        -webkit-transition-timing-function:top .5s ease-in-out;/* For Safari 3.1 to 6.0 */
        -moz-transition-timing-function:top .5s ease-in-out;
        -ms-transition-timing-function:top .5s ease-in-out;
        -o-transition-timing-function:top .5s ease-in-out;
		
        transition:.5s ease-in-out;
        padding-top:5px;
		
		/*
		-webkit-transition-timing-function:top 0.3s ease-in;/* For Safari 3.1 to 6.0 */   /*
		-webkit-transition-timing-function:top 2.9s ease-out;/* For Safari 3.1 to 6.0 */  /*
        -moz-transition-timing-function:top 0.3s ease-in;
		-moz-transition-timing-function:top 2.9s ease-out;
        -ms-transition-timing-function:top 0.9s ease-in;
		-ms-transition-timing-function:top 2.9s ease-out;
        -o-transition-timing-function:top 0.3s ease-in;
		-o-transition-timing-function:top 2.9s ease-out; 
		
        transition:0.3s ease-in;
		transition:10.5s ease-out;
        padding-top:5px;*/
      
 }    
     
 #nav5 li:hover .sub-menu li:nth-child(1) {left:0px; top:40px;}    
 #nav5 li:hover .sub-menu li:nth-child(2) {left:0px; top:80px;}
 #nav5 li:hover .sub-menu li:nth-child(3) {left:0px; top:120px;}
 #nav5 li:hover .sub-menu li:nth-child(4) {left:0px; top:160px;}
 #nav5 li:hover .sub-menu li:nth-child(5) {left:0px; top:200px;}    
 #nav5 li:hover .sub-menu li:nth-child(6) {left:0px; top:240px;}
 #nav5 li:hover .sub-menu li:nth-child(7) {left:0px; top:280px;}
 #nav5 li:hover .sub-menu li:nth-child(8) {left:0px; top:320px;}
/* END OF MAIN NAVAGATION CODING*/

/* Slide in side navagation script -----------------------------------*/
.sideMenu{
        font-size:18px;
        height:100% auto;
        background:#23476B;
        
        position:absolute;
        left:-230px;
        
        -webkit-transition:all .5s ease-in-out;
        -moz-transition:all .5s ease-in-out;
        -ms-transition:all .5s ease-in-out;
        -o-transition:all .5s ease-in-out;
        transition:all .5s ease-in-out;
        z-index:2000;
		
		/* -webkit-transition:all .3s ease-in;
		-webkit-transition:all 10.5s ease-out;
        -moz-transition:all .3s ease-in;
		-moz-transition:all 10.5s ease-out;
        -ms-transition:all .3s ease-in;
		-ms-transition:all 10.5s ease-out;
        -o-transition:all .3s ease-in;
		-o-transition:all 10.5s ease-out;
        transition:all .3s ease-in;
		transition:all 10.5s ease-out;
        z-index:2000;  */
 }  

.sideMenu a{width:230px;
            height:100% auto;
            text-decoration:none;
            background:#23476B;
            .letter-spacing:.1em;
            color:#FFF; 
			display:block; 
			padding:20px 0 20px 30px;
            border-bottom:1px dotted grey;
            line-height:20px;
			}
			
			
.sideMenu li {list-style-type:none; }   

.slideOutHeader {width:100%;
        height:0px auto;
        margin:auto;
 }

#slideOutNav{float:left; 
line-height:45px;
color:#23476B0;

}    
 /* change these
 .sideMenu { width: 100%; text-align:center;}*/

.sideMenu a:hover {background:#112233; color:#74C5F4; }
.side-nav-ul ul{display:none; }
.side-nav-ul li:hover ul{display:block; }

.side-nav-ul ul a:before {content:'\203A';
                          margin-right:20px;}

.sideMenu .sub-arrow:after{
          content:'\203A';
		  float:right; 
		  margin-right:20px;
		  -webkit-transform:rotate(90deg);
		  -moz-transform:rotate(90deg);
          -ms-transform:rotate(90deg);
          -o-transform:rotate(90deg);
          transform:rotate(90deg);
		  }
.sideMenu li:hover .sub-arrow:after {content:'\2039'; }
		  
		  
.sideMenu li:last-child a {border-bottom: color; }	 
/*----------------------------------------*/
/*.sideMenu-icon{
       display:block;
	   position:fixed;
       padding:10px 20px;
	   background:black;
	   color:white;
	   cursor:pointer;
	   float:right;
	   margin-top:-120px;
	   margin-left:240px;
	   in-left:4px;	   
	   z-index:9000;
	  }*/
      

.sideMenu-icon{
       display:block;
	   padding:10px 20px;
	   background:transparent;
	   color:white;
	   cursor:pointer;
	   float:right;
	   position:fixed;
	   margin-top:-120px;
	   margin-left:0px;
	   in-left:4px;	   
	   z-index:8500;
	  }

	
#menuToggle{display:none; }	

#menuToggle:checked ~ .sideMenu {position:absolute; left:0; }
#menuToggle:checked ~ .mainSection{position:absolute; left:260px;}
 
 
 @media only screen and (min-width:1800px){
.promo{position:fixed;
      margin:5px 0 0 1200px;
	  a{color=red;}
	  
	  
      }
 }
@media screen and (max-width:1799px){
.promo{position:fixed;
      margin:0 0 0 4000px;
      }
 }	    
 
.mainSection{
          width:100%;
          margin:auto; 
		  position:absolute;
		 
 	
		  }	    	

/*End of slide in side navagation script -----------------------------------*/

 .header{opacity: 1;
        display:block;
        filter: alpha(opacity=100); /* For IE8 and earlier */
        height:auto;60px;
        width:100%;
        top:0px;
        position:fixed;
        Z-index:8000;
        
    }    
  
#logo {font-family:Roboto,arial;
       font-size:1.9em;
       font-weight:800;
       padding-left:1.7em;
       padding-top:0.3em;
       line-height:0.5em;
       color:white;
       display:block;
       background-color:black;
       } 
 
#logo-slogin{color:white;
             display:block;
             padding:0.6em 0em 0.7em 9.5em;
             font-size:.77em;
             display:block; 
             background:black;
             line-height: .8em;
             border-bottom:1px solid red;
         }
  
#contactDetails{font-size:.7em; color:#F1F9D5; weight:strong;
                 display:block;
                 float:right;
                 padding:.5em;
                 margin-top:-4.2em;
                 text-align:right;
                 margin-right:1.2em;
               
 }
.wrapper{
	    padding:0;
        display:block;
        width:auto;
        max-width:auto;
        height:1000px, auto;
        min-height:1000px;
        border:solid #404040 2px;
        background-color:white;
        margin-top:128px;
        margin-left:1%;
        margin-right:1%;
       /* font-size:0.3em;*/
        position: static;
        /*opacity: 0.15;*/
		opacity: 0.75;
        
		-webkit-transition:4.5s ease;/* For Safari 3.1 to 6.0 */ 
		-moz-transition:4.5s ease;
		-ms-transition:4.5s ease;
		-o-transition:4.5s ease;
		 transition:4.5s ease-out;
        filter: alpha(opacity=40); /* For IE8 and earlier */
        
       z-index:-9999;
        }
 .wrapper a{border-top-right-radius::15px;
          border-top-left-radius::15px;
}       
            
.wrapper:hover{opacity:1;
                -webkit-transition:2s ease;/* For Safari 3.1 to 6.0 */ 
		        -moz-transition:2s ease;
		        -ms-transition:2s ease;
		        -o-transition:2s ease;
				transition:2s ease;
				
				}
				
				
   
.content {height:100% auto;
          display:block;
		   /*font-size: 1.6em;*/
		   margin:0 10% 0 10%;
          text-decoration:none;          
          list-style-type:none;
          }
	  
              
             
.mainSection {height:800px auto;
              max-width:1020px;
              margin-left:10%;
              margin-right:10%;
              border:solid grey 2px;
              border-radius:15px;
             }  
			 
/*in your css hide the field so real users cant fill it in ---  to stop apamming*/
form #website{ display:none; }			 
			 
			 
      
/*Making YouTube videos scale in all browsers, tablets and phones for responsive design*/
.video-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0px; 
    max-width: 100%
	overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    max-width: 100%
	top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}
/*END OF Making YouTube videos scale in all browsers, tablets and phones for responsive design */ 
  
  /*MAIN NAVAGATION CODING for big desktop screen*/         
        
.container{max-width:1000px;
			height:800px auto;
			border:0;
			padding:30px;
			border:solid #EAF0F1 2px;
			background-color:#EAF0F1;
			border-radius:15px;
          }
		  
.box_container{max-width:1000px;
			height:auto;
			border:0;
			padding:20px;
			border:solid #EAF0F1 0px;
			border-radius:15px;
			box-shadow: 0px 4px 8px 0 rgba(0, 0, 0, 0.2),0 6px 20px 0 rgba(0, 0, 0, 0.19);
          }		  
		  
.sideMenu{}
          
          
          
          
        
                   

.article{ 
	     padding:.5em 1em 0 1em;
         margin:15px 5% 0 5%; 
		 max-width:1020px; 
		 width:auto;
         height:800px auto;
         border:solid #313F6B 0px;
         border-top-left-radius:15px;
         border-top-right-radius:15px;
		 box-shadow: 4px 4px 20px 4px rgba(0, 0, 0, 0.2),0 6px 10px 0 rgba(0, 0, 0, 0.19);
        }
        
.ArticleHeader{display:block; padding:0px; border-radius: 5px; }       
.page1stImage{background-color:#F2F2F2;
              padding 5px;
              border-radius:10px;
              margin:0px auto
              z-index:-1;
          } 
.textOverImage{text-align:center;
                font-size:200px;
                float:right;
                margin:200px 200px;
                z-index:10;                 
         }
.pageHeader{display:block; padding:0px; border-radius: 5px; }
.note { font-size: 1.2px }  
.footer {margin:0.5em -2em 0 -2em;
         /*font-family: serif;*/
         width:100% auto;
         height:auto;
         display:block;
         background-color:#3a5a95;
         color:rgba(247, 247, 248, 0.945);
         font-size:0.6em;
         padding:.5em 2em;
         border-top:6px solid white;
         border-top-style: double;
         }
 .footer a{text-decoration:none;
           color:#B6CEE6;
                      }        
  .footer a:hover {color:yellow;background-color:#313F6B}

.footer-nav{display:none;}

/*--------------------------------------------*/
/* Nav2 mobile (Ipad2 size) */
@media screen and (max-width:1025px){
body {
	background-image: url("");}
 	.bg-home{background-image: url("");}
	 .bg-printing{background-image: url("");}
	 .bg-printing01{background-image: url("");}
	 .bg-contact{background-image: url("");}
	 .bg-photopaper{background-image: url("");}
	 .bg-poster{background-image: url("");}
	 .bg-canvas{background-image: url("");}
	 .bg-laminating{background-image: url("");}
	 .bg-art-paper{background-image: url("");}	 
	 .bg-moulding{background-image: url("");}	
	 .bg-framing-factory{background-image: url("");}	
	 .bg-framing-factory2{background-image: url("");}
	 .bg-20150908-9658{background-image: url("");}	
     .bg-framekit{background-image: url("");}	 
	
    #nav5{display:none;} +
    

.header{opacity: 1;
        display:block;
        filter: alpha(opacity=100); /* For IE8 and earlier */
       
        width:100%;
        top:0px;
        position:fixed;
        Z-index:8000;
        
    } 


.header{
        position: static;
        opacity: inherit; 
        
        height:auto;60px;
        }
        
           
                       
#logo {
       font-size:2em;
       
       padding-left:.3em;
       padding-top:0.3em;
       line-height:0.5em;
       } 
#logo-slogin{
             padding:0.9em 0em 0.5em 2.6em;
             font-size:.7em;
             line-height: .8em;
             } 
                    
       .wrapper { padding:0.4em;
        margin: 0 auto;
        width: 1020px auto;
        max-width:1020px;
        height:100px, auto;
        border:solid #404040 2px;
        background-color:white;
        border-radius:15px;
        margin-top:10px;
        /*font-size:0.3em;*/
        opacity: 1;
		 filter: alpha(opacity=100); /* For IE8 and earlier */
      } 
/* slide out slide menu botton --------------*/       
 
.sideMenu-icon{
      
	   padding:20px 20px;
	   background:black;
	   color:white;
	   cursor:pointer;
	   position:static;
	   margin-top:-85px;
	   margin-left:220px;
	   in-left:4px;	   
	   z-index:9000;
       /*font-size:35px;*/
	  }
	
#menuToggle{display:none; }	

#menuToggle:checked ~ .sideMenu {position:absolute; left:0; }
#menuToggle:checked ~ .mainSection{position:absolute; left:260px;}

#contactDetails{display:none;}
                 
                 

}/* end of ipad style -------------------------------------------------*/

/*--------------------------------------------*/
/* Nav2 mobile Samsung S3 320x640px, iphone 320 x 468px */
@media screen and (max-width:640px){

body { font-size:1.4em;
      overflow: scroll;
      }	
H1 { font-family:Roboto, Verdana; font-size: 1em; color:white; padding:.3em;
     background: #313F6B; text-align:center;letter-spacing:0.04em; margin-bottom: 8px; display:block;
     border-radius: 10px; border-color:black 1px;}
H2 { font-family:Roboto, Verdana; font-size: 1.5em; color: #000000; }
H3 { font-family:Roboto, Verdana; font-size:.8em;font-weight:400; color: #000080;}
H4 { font-family:Roboto, Verdana; font-size:1em;color: #000080;}
H5 { font-family:Roboto, Verdana; font-size:.8em; font-weight:100; color: #000000;}
H6 { font-family:Roboto, Verdana; font-size:.7em; font-weight:100; color: #000000;}
H7 { font-family:Roboto, Verdana; font-size:.7em; font-weight:100; color: #000000;}
.article{padding:.3em .3em 0 .3em;
         margin:3px .5% 0 .5%; 
    	  }
	  
    #nav5{display:none;}   	
	
.footer-nav{display:block;	 font-size:1.5em; font-weight:600 ; 	}	
.footer-nav ul{
            text-decoration:none;
	         list-style-type:none;
			}  

.footer-nav li{display:block; width:100%;
            background-color:#23476B;
           text-decoration:none;
	     
			
         /*background-color:red;*/	
			 padding:5px 8px;	
			 margin:10px 4px;
			 border:1px solid grey;
			 border-radius:6px;
}	

.footer-sub li{background-color: #660000;}        	
	

}